<!--
 * @Description: 
 * @Author: ZachGmy
 * @Date: 2025-07-22 14:23:46
 * @LastEditors: ZachGmy
 * @LastEditTime: 2025-07-22 16:30:56
-->
<template>
  <div>
    <!-- 设置标题 -->
    <Title title="实时颗粒物曲线"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="right2" style="height: 150px; margin-top: 15px"></div>
  </div>
</template>

<script>
import { Line } from "@antv/g2plot"; // 引入折线图组件
export default {
  data() {
    return {};
  },
  mounted() {
    this.initRight2();
  },
methods: {
  initRight2(){
     const data= [
  { "year": "2020", "value": 5.4, "category": "工业排放（PM2.5）" },
  { "year": "2020", "value": 6.8, "category": "汽车尾气（PM2.5）" },
  { "year": "2020", "value": 4.7, "category": "燃煤污染（PM2.5）" },
  { "year": "2020", "value": 1.7, "category": "扬尘（PM2.5）" },

  { "year": "2021", "value": 5.2, "category": "工业排放（PM2.5）" },
  { "year": "2021", "value": 6.6, "category": "汽车尾气（PM2.5）" },
  { "year": "2021", "value": 4.4, "category": "燃煤污染（PM2.5）" },
  { "year": "2021", "value": 1.6, "category": "扬尘（PM2.5）" },

  { "year": "2022", "value": 5.0, "category": "工业排放（PM2.5）" },
  { "year": "2022", "value": 6.4, "category": "汽车尾气（PM2.5）" },
  { "year": "2022", "value": 4.1, "category": "燃煤污染（PM2.5）" },
  { "year": "2022", "value": 1.5, "category": "扬尘（PM2.5）" },

  { "year": "2023", "value": 4.8, "category": "工业排放（PM2.5）" },
  { "year": "2023", "value": 6.2, "category": "汽车尾气（PM2.5）" },
  { "year": "2023", "value": 3.8, "category": "燃煤污染（PM2.5）" },
  { "year": "2023", "value": 1.4, "category": "扬尘（PM2.5）" },

  { "year": "2024", "value": 4.6, "category": "工业排放（PM2.5）" },
  { "year": "2024", "value": 6.0, "category": "汽车尾气（PM2.5）" },
  { "year": "2024", "value": 3.5, "category": "燃煤污染（PM2.5）" },
  { "year": "2024", "value": 1.3, "category": "扬尘（PM2.5）" },
  
  { "year": "2025", "value": 4.4, "category": "工业排放（PM2.5）" },
  { "year": "2025", "value": 5.8, "category": "汽车尾气（PM2.5）" },
  { "year": "2025", "value": 3.2, "category": "燃煤污染（PM2.5）" },
  { "year": "2025", "value": 1.2, "category": "扬尘（PM2.5）" }
]  
  const line = new Line(this.$refs.right2, {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
      color: ['#1979C9', '#D62A0D', '#FAA219'],
    });

    line.render();
  },

},
}
    
</script>

<style lang="less" scoped>
</style>